<template>
  <basic-container>
    <el-row :gutter="5">
      <el-col :span="3" class="row-left">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>指令库</span>
          </div>
          <div class="palette-list">
            <!-- 模板框 -->
            <div class="palette-div" id="myPaletteDiv"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="21" class="row-center">
        <el-card class="box-card">
          <div class="designer-btns">
            <div class="pull-left">
              <ul class="">
                <li>
                  <!-- <i class="fa fa-reply"></i> -->
                  <img src="@/assets/img/station-ui/上一步.png" alt="" />
                  <p>上一步</p>
                </li>
                <li>
                  <!-- <i class="fa fa-reply"></i> -->
                  <img src="@/assets/img/station-ui/下一步.png" alt="" />
                  <p>下一步</p>
                </li>
              </ul>
            </div>
            <div class="pull-right">
              <div class="split-line"></div>
              <ul>
                <li @click="onReturn()">
                  <!-- <i class="fa fa-arrow-left"></i> -->
                  <img src="@/assets/img/station-ui/返回.png" alt="" />
                  <p>返回</p>
                </li>
                <li class="bg-blue">
                  <el-button type="primary" icon="el-icon-document" @click="saveStationFlowData()">
                    <p style="margin-top: 10px">保存</p>
                  </el-button>
                </li>
              </ul>
            </div>
          </div>
          <div class="designer-description">
            <div class="desc-name">API名称：{{ apiInfo.name }}</div>
            <div class="desc-type">API编码：{{ apiInfo.code }}</div>
            <div>
              默认API类型：
              <el-select v-model="apiType" placeholder="请选择" @change="apiTypeChange">
                <el-option label="过站工站" value="过站工站"></el-option>
                <el-option label="测试工站" value="测试工站"></el-option>
                <el-option label="组装工站" value="组装工站"></el-option>
                <el-option label="在线内包装" value="在线内包装"></el-option>
              </el-select>
            </div>
          </div>
          <el-row :gutter="5" class="designer-box">
            <el-col :span="19" class="designer-div">
              <el-card>
                <!-- 设计框 -->
                <div class="flow-div" id="myFlowDesignerDiv"></div>
              </el-card>
            </el-col>
            <el-col :span="5" class="attr-div">
              <template v-if="!selectedNodeInfo.nodeType">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>API基本信息</span>
                  </div>
                  <el-tabs class="nav-tab" v-model="activeName">
                    <el-tab-pane label="基本信息" name="1">
                      <!-- <avue-form id="apiInfo" v-model="apiInfo" :option="apiInfoOption"></avue-form> -->
                      <el-form class="basicInfoForm" ref="form" :model="apiInfo" label-width="110px" label-position="top" :rules="apiInfoRules">
                        <el-form-item label="API响应名称:" prop="name">
                          <el-input v-model="apiInfo.name" :clearable="true" name="name"></el-input>
                        </el-form-item>
                        <el-form-item label="API响应编码:" prop="code">
                          <el-input v-model="apiInfo.code" :clearable="true" name="code"></el-input>
                        </el-form-item>
                        <el-form-item label="API地址:" prop="url">
                          <el-input v-model="apiInfo.url" :clearable="true" name="url"></el-input>
                        </el-form-item>
                        <el-form-item label="备注:">
                          <el-input type="textarea" :rows="3" placeholder="请输入备注" name="zhCnContent" v-model="apiInfo.zhCnContent"></el-input>
                        </el-form-item>
                      </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="参数信息" name="2">
                      <avue-crud :data="paramsData" :option="paramsOption" @selection-change="paramsSelectionChange">
                        <template slot="menuLeft">
                          <el-button type="primary" size="small" icon="el-icon-plus" @click="addParams">新 增</el-button>
                          <el-button type="danger" size="small" icon="el-icon-delete" plain :disabled="paramsData.length > 0 ? false : true" @click="deleteParams"
                            >删 除
                          </el-button>
                        </template>
                      </avue-crud>
                    </el-tab-pane>
                  </el-tabs>
                </el-card>
              </template>
              <template v-if="selectedNodeInfo.nodeType">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>指令属性</span>
                  </div>
                  <el-tabs class="nav-tab" v-model="nodeInfoActiveName">
                    <el-tab-pane label="基本信息" name="1">
                      <!-- <avue-form id="selectedNodeBasicInfo" :defaults.sync="selectedNodeInfoDefaults" v-model="selectedNodeInfo" :option="basicInfoOption"></avue-form> -->
                      <el-form class="basicInfoForm" ref="form" :model="selectedNodeInfo" label-width="110px" label-position="top" :rules="basicInfoRules">
                        <el-form-item label="节点类型:">
                          <el-input v-model="selectedNodeInfo.nodeTypeName" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="节点名称:" prop="text">
                          <el-input v-model="selectedNodeInfo.text" :clearable="true" name="text"></el-input>
                        </el-form-item>
                        <el-form-item label="节点编码:" prop="nodeCode">
                          <el-input v-model="selectedNodeInfo.nodeCode" name="nodeCode" disabled></el-input>
                        </el-form-item>
                        <!-- <el-form-item v-if="selectedNodeInfo.nodeType === 'PRINT'" label="API响应:" prop="mappingApiName">
                          <el-input placeholder="请选择API响应" v-model="selectedNodeInfo.mappingApiName" disabled>
                            <el-button slot="append" icon="el-icon-search" @click="openApiModal"></el-button>
                          </el-input>                                                                             
                        </el-form-item> -->
                      </el-form>
                    </el-tab-pane>
                    <el-tab-pane
                      v-if="
                        selectedNodeInfo.nodeType == 'CHECKER' ||
                        selectedNodeInfo.nodeType == 'BINDINGPREPARE' ||
                        selectedNodeInfo.nodeType == 'UNBINDINGPREPARE' ||
                        selectedNodeInfo.nodeType == 'OVERSTATIONPREPARE'
                      "
                      name="2"
                    >
                      <template v-if="selectedNodeInfo.nodeType == 'CHECKER'">
                        <span slot="label">检查节点信息</span>
                        <avue-form v-model="selectedNodeInfo" :option="checkNodeInfoOption" :key="1"></avue-form>
                        <p class="ag-grid-title border-title" style="margin-left: 10px">检查项</p>
                        <el-button class="addCheckBtn" type="primary" size="small" icon="el-icon-plus" @click="addCheckItem">添 加 </el-button>
                        <el-card class="box-card check-item-content" v-for="(item, index) in selectedNodeInfo.checkItemList" :key="index">
                          <div slot="header" class="clearfix">
                            <span>{{ item.name }}</span>
                            <el-button style="float: right; padding: 3px 3px" type="info" icon="el-icon-close" circle @click="removeCheckItem(index)"></el-button>
                          </div>
                          <div class="isCheck-item-content">{{ item.field }}{{ item.operationalCharacter }} {{ item.judgeValue }}</div>
                        </el-card>
                      </template>
                      <template v-if="selectedNodeInfo.nodeType == 'BINDINGPREPARE'">
                        <span slot="label">绑定节点信息</span>
                        <avue-form v-model="selectedNodeInfo" :option="bindingNodeInfoOption" :key="2"></avue-form>
                      </template>
                      <template v-if="selectedNodeInfo.nodeType == 'UNBINDINGPREPARE'">
                        <span slot="label">解绑节点信息</span>
                        <avue-form v-model="selectedNodeInfo" :option="unbindingNodeInfoOption" :key="3"></avue-form>
                      </template>
                      <template v-if="selectedNodeInfo.nodeType == 'OVERSTATIONPREPARE'">
                        <span slot="label">过站节点信息</span>
                        <avue-form v-model="selectedNodeInfo" :option="overStationNodeInfoOption" :key="4"></avue-form>
                      </template>
                    </el-tab-pane>
                  </el-tabs>
                </el-card>
              </template>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <common-modal-template ref="commonModalTemplate" :key="timer" :option="tableOption" @getSelectedRows="getSelectedRows" @newKey="newKey"></common-modal-template>
  </basic-container>
</template>
<script>
import stationflowDesign from './stationflow-design.js';

export default {
  ...stationflowDesign
};
</script>
<style scoped lang="scss">
@import './stationflow-design.scss';
</style>
